<template>
  <div class="home">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary" icon="el-icon-phone-outline" round plain
        >主要按钮</el-button
      >
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning" :loading="true">警告按钮</el-button>
      <el-button type="danger" disabled>危险按钮</el-button>

      <el-button
        type="primary"
        icon="el-icon-phone-outline"
        circle
        plain
      ></el-button>
      <el-button type="text">文字按钮</el-button>
    </el-row>

    <el-row>
      <el-button round>默认按钮</el-button>
      <el-button size="medium" round>中等按钮</el-button>
      <el-button size="small" round>小型按钮</el-button>
      <el-button size="mini" round>超小按钮</el-button>
    </el-row>
    <div>
      <el-link href="https://element.eleme.io" target="_blank"
        >默认链接</el-link
      >
      <el-link type="primary">主要链接</el-link>
      <el-link type="success">成功链接</el-link>
      <el-link type="warning">警告链接</el-link>
      <el-link type="danger">危险链接</el-link>
      <el-link type="info">信息链接</el-link>
    </div>
    <div>
      <el-radio v-model="radio" label="1">备选项1</el-radio>
      <el-radio v-model="radio" label="2">备选项2</el-radio>
    </div>

    <div>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="html"></el-checkbox>
        <el-checkbox label="css"></el-checkbox>
        <el-checkbox label="js"></el-checkbox>
        <el-checkbox label="jq" disabled></el-checkbox>
        <el-checkbox label="vue" disabled></el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      <el-input v-model="input" placeholder="请输入内容" clearable></el-input>
    </div>
    <div>
      <el-input
        v-model="input"
        show-password
        placeholder="密码"
        clearable
      ></el-input>
    </div>
    <div>
      <el-input
        v-model="input"
        suffix-icon="el-icon-date"
        placeholder=""
      ></el-input>
    </div>
    <div>
      <el-input
        v-model="input"
        prefix-icon="el-icon-search"
        placeholder=""
      ></el-input>
    </div>
    <div>
      <el-input
        type="textarea"
        :rows="3"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      radio: "1",
      checkList: ["html", "css", "js"],
      input: "",
      textarea: "",
    };
  },
};
</script>
